<template>
    <div class="recharge-page">
        <!-- 页面头部 -->
        <van-nav-bar title="账户充值" left-arrow @click-left="goBack" />
        <!-- 余额和提示信息 -->
        <div class="balance-tip">
        <span class="balance">¥ {{ zhye ? zhye:0 }}</span>
        <van-button type="primary" round size="small" @click="contactCustomerService">联系客服</van-button>
    </div>
    <!-- 充值金额选择区域 -->
    <div class="amount-selection">
        <div class="title">快速充值</div>
        <div class="amount-options">
            <div
              v-for="(option, index) in amountOptions"
              :key="index"
              class="amount-option"
              @click="selectAmount(option)"
            >
            <div :style="czje == option.czje ? {backgroundColor:'#14C262',color:'#fff'}:{}" >
              <div class="amount" >充值{{option.czje}}元</div>
                <div class="bonus" :style="{ color:'red' }">
                    送{{option.zsje? option.zsje:0}}元
                </div>
                <div class="received-amount">到账{{option.dzje}}元</div>
            </div>
            </div>
        </div>
        <!-- 自定义金额输入 -->
        <van-field
            v-model="czje"
            type="number"
            placeholder="自定义金额"
            class="custom-amount-field"
            @focus="onInputCzje"
            @input="onChangeCzje"
        />
    </div>
    <!-- 立即充值按钮 -->
    <van-button type="primary" block large @click="handleRecharge">立即充值</van-button>
    </div>
</template>

<script>import { queryRecharsetting, querySysConifgByKey, saveRecharge } from "../../api/api";

export default {
  data() {
    return {
      czje: 0,
      amountOptions: [
      ],
      hyid: undefined,
      zhye: undefined,
      hyinfo: {},
      zsje: 0,
      dzje: 0,
    }
  },
  created() {
    // 从路由参数中获取hyid
    this.hyid = this.$route.query.hyid
    this.zhye = this.$route.query.zhye
    this.queryRecharsetting()
  },
  methods: {
    onChangeCzje(value){
      let that = this
      this.zsje = 0
      this.dzje = value
      for (let i = 0; i < that.amountOptions.length; i++) {
        if (that.amountOptions[i].czje == value) {
          that.zsje = that.amountOptions[i].zsje
          that.dzje = that.amountOptions[i].dzje
        }
      }
    },
    onInputCzje(){
      this.zsje = 0
      this.dzje = this.czje
    },
    queryRecharsetting(){
        let that = this
        queryRecharsetting({}).then(res => {
          this.amountOptions = res.rows
        })
    },
    getHyinfo() {
        const param = { hyid: this.hyid }
        getHyinfo(param).then(res => {
            if (res.code == 200) {
                this.hyinfo = res.data
            }
        })
    },
    goBack() {
      // 处理返回上一页逻辑，这里简单示例，实际可使用路由跳转
      this.$router.back()
    },
    contactCustomerService() {
      // 调用打电话
      querySysConifgByKey({ configKey: 'khphone' }).then(res => {
          if (res.code == 200) {
            window.location.href = 'tel:' + res.msg
          }
      })
    },
    selectAmount(item) {
      this.czje = item.czje
      this.zsje = item.zsje
      this.dzje = item.dzje
      console.log('选中的金额',item)
      console.log('选中的金额',this.zsje)
      console.log('选中的金额',this.dzje)
    },
    handleRecharge() {
      let that = this
      // 处理立即充值逻辑，比如调用充值接口
      let param = {
        hyid: that.hyid,
        czje: that.czje ,
        zsje: that.zsje ,
        dzje: that.dzje ,
      }
      console.log('参数',param)
      saveRecharge(param).then(res => {
        if (res.code == 200) {
            that.showConfirmDialog = false
            let payurl = res.data.contenturl
            // 假设 payurl 是一个 JSON 字符串，将其转换为 JSON 对象
            let payObj = JSON.parse(payurl);
            payObj.appId = 'wxd81a6bd295facda3'
            // 调起微信支付
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                payObj,
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
                    } else {
                        that.$toast(res.msg)
                    }
                }
            );
        }
      })
    }
  }
}
</script>

<style scoped>
.recharge-page {
    background-color: #f7f7f7;
}
.balance-tip {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:10px;
    padding:20px;
}
.balance {
font-size: 20px;
}
.amount-selection {
margin-bottom: 20px;
}
.title {
    font-size: 15px;
    padding-left: 10px;
    margin-bottom: 10px;
}
.amount-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
}
  .amount-option {
      width: 30%;
      border: 1px solid #14C262;
      border-radius: 5px;
      padding: 1px;
      margin-bottom: 15px;
      text-align: center;
  }
  .custom-amount-field {
      margin-top: 15px;
      margin-bottom: 20px;
  }
  .amount {
      font-size: 16px;
      padding-top: 10px;
      padding-bottom: 10px;
  }

  .received-amount{
    font-size:16px;
    padding:5px;
  }

  .bonus{
    font-size: 14px;
  }
</style>
